
<template>
  <div class="tree">
      <div class="tree-title">
          <h3>素材库结构</h3>
      </div>
      <div class="tree-search">
        <Input v-model="value1" placeholder="请输入关键字进行搜索">
            <Button slot="append" icon="ios-search"></Button>
        </Input>
      </div>
      <div class="tree-body">
          <Tree :data="baseData" show-checkbox></Tree>
      </div>
  </div>
</template>

<script>
  import sidebar from '../components/sidebar'
  import headbar from '../components/headbar'
  export default {
    components: {sidebar, headbar },
    data () {
      return {
          baseData: [{
                expand: true,
                title: '<router-link>HSE基础知识</router-link>',
                children: [{
                    title: '<router-link>安全基本知识</router-link>',
                },
                {
                   title: '<router-link>消防基本知识</router-link>',
                },
                {
                   title: '<router-link>消防与健康基本知识</router-link>',
                }
                ]}, {
                    title: '<router-link>行业专业安全知识</router-link>',
                    expand: true,
                    children: [{
                        title: '<router-link>消防专业安全知识</router-link>',
                    },{
                        title: '<router-link>工程施工专业知识</router-link>',
                    },{
                        title: '<router-link>仪表仪器专业知识</router-link>',
                    }]
                }]
        }
    },
    ready () {
    },
    beforeDestroy () {
    },
    methods: {
    }
  }
</script>

<style lang="less">
    .tree .tree-title {
        height: 60px;
        border-bottom: 1px solid #d3d8e0;
    }
    
    .tree .tree-title h3 {
        line-height: 60px;
        text-align: center;
        font-size: 20px;
        color: #6e6d6d;
    }

    .tree .tree-search {
        width: 250px;
        margin: 25px auto;
    }
    .tree .tree-body {
        padding-left: 30px;
    }
</style>
